<script setup lang="ts">
import TestUtils from '@/utils/TestUtils.ts'
import {storeToRefs} from "pinia";
import {useCounterStore} from "@/stores/counter.ts";

const {sayHello} = TestUtils
const count1 = ref(0)

const store = useCounterStore()
const {count} = storeToRefs(store)

const message = useMessage()
const dialog = useDialog()
const notification = useNotification()
const loadingBar = useLoadingBar()
const onMessage = () => {
  message.success('Hello, world!')
}

const onDialog = () => {
  dialog.success({
    title: 'Hello, world!',
    content: 'This is a success dialog.',
    onPositiveClick: onMessage,
  })
}

const onNotification = () => {
  notification.success({
    title: 'Hello, world!',
    content: 'This is a success notification.',
  })
}

const onLoading = () => {
  loadingBar.start()
  setTimeout(() => {
    loadingBar.finish()
  }, 3000)
}

const appStore = useAppStore()

const {layout} = storeToRefs(appStore)
</script>

<template>
  <NButton @click="() => count1++">{{ count1 }}</NButton>
  <NButton @click="() => sayHello()">{{ count1 }}</NButton>
  <NButton @click="() =>store.increment() ">{{ `${count} / ${store.doubleCount}` }}</NButton>
  <NButton @click="() =>message.success('success') ">成功</NButton>
  <div class="w-10 h-10 bg-red-500"></div>

  <div>
    <n-space>
      <n-button @click="onMessage">
        Message
      </n-button>

      <n-button @click="onDialog">
        Dialog
      </n-button>

      <n-button @click="onNotification">
        Notification
      </n-button>

      <n-button @click="onLoading">
        Loading
      </n-button>
    </n-space>
  </div>

  <div>
    <pre class="bg-gray-100 p-4 rounded-lg text-sm overflow-auto">
      {{ JSON.stringify(layout, null, 2) }}
    </pre>
    <NButton @click="() => appStore.toggleLayout('top')">
      顶部通栏布局
    </NButton>
    <NButton @click="() => appStore.toggleLayout('side')">
      侧边通栏布局
    </NButton>
    <NButton @click="() => appStore.toggleLayout('mix')">
      混合布局
    </NButton>
  </div>
</template>
